<template>
  <VPage>
    <el-tabs v-model="activeName" type="card" class="px-[8px] py-[8px]">
      <el-tab-pane
        :label="item.label"
        :name="item.value"
        v-for="(item, index) in tabs"
        :key="index"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="mb-[4px] ml-2">
      <span>SPU: {{ current_item?.spu || "-" }}</span>
      <span class="m-5">SKU: {{ current_item?.sku || "-" }}</span>
      <el-button @click="back" type="primary">返回</el-button>
    </div>

    <div
      class="h-[77vh] overflow-auto container-preview"
      v-loading="loading"
      id="scrollContainer"
      @scroll="handleScroll"
    >
      <el-row class="!mx-0" :gutter="10">
        <el-col class="mb-2" :span="12" v-for="it in current_item.contents" :key="it.id">
          <el-card>
            <template #header>
              <div class="flex items-center justify-between">
                <div style="width: calc(100% - 120px)">
                  <VText :value="it?.image_name"></VText>
                </div>
              </div>
            </template>
            <el-image
              class="w-[100%] h-[500px]"
              :src="it.image_link_watermark || it.image_link"
              alt=""
              fit="contain"
              :preview-src-list="
                photoSort(it.image_link_watermark || it.image_link, previewSrcList)
              "
              @contextmenu.prevent
            />
          </el-card>
        </el-col>
      </el-row>
      <el-backtop target=".container-preview" :visibility-height="100">
        <div
          class="bg-[#3487FF] flex items-center justify-center rounded-[40px] text-white w-[40px] h-[40px] leading-[40px]"
        >
          <svg-icon icon-class="ArrowUp"></svg-icon>
        </div>
      </el-backtop>
    </div>
  </VPage>
</template>
<script setup name="TaskProductPreview">
import { ElMessage } from "element-plus";
import action from "@/utils/action.js";
import { getSkuImg } from "@/views/task/product/api.js";
import { copyText } from "@/utils/tools.js";
import { useRouter } from "vue-router";
import { downLoadImage } from "@/utils/downloadFile.js";
import { photoSort } from "@/utils/index";

const router = useRouter();
const tabs = ref([]);
const activeName = ref(null);
const loading = ref(false);

const current_item = computed(() => {
  return tabs.value.find((item) => item.value === activeName.value) || {};
});

const previewSrcList = computed(() => {
  return current_item.value.contents?.map(
    (i) => i.image_link_watermark || i.image_link || i.url
  );
});

const getSkuImgList = async (id, sku) => {
  tabs.value = [];
  activeName.value = null;
  loading.value = true;
  try {
    const res = await getSkuImg({ skuId: id });
    if (res.code === 200) {
      let data = res.data.map((item) => {
        const contents = [];
        item?.contents?.map((i) => {
          i?.values.map((j) => {
            contents.push(j);
          });
        });

        return {
          label: item.custom_tag,
          value: item.id,
          contents: contents || [],
          spu: item.spu,
          sku,
        };
      });
      tabs.value = data;
      activeName.value = tabs.value[0].value;
    } else {
      ElMessage.error(res.msg);
    }
  } finally {
    loading.value = false;
  }
};
const back = () => {
  action.setGlobalState({
    changeMicoTabsPath: {
      type: "closeActiveTab",
    },
  });
};

const scrollPosition = reactive({
  top: 0,
});

const handleScroll = (event) => {
  scrollPosition.top = event.target.scrollTop;
};

const routeQuery = ref();
watch(
  router.currentRoute,
  (newRouter, oldRouter) => {
    if (newRouter.path == "/task/product/preview") {
      if (JSON.stringify(newRouter.query) !== "{}") {
        if (JSON.stringify(newRouter.query) != JSON.stringify(routeQuery.value)) {
          routeQuery.value = newRouter.query;
          const { id, sku } = newRouter.query;
          getSkuImgList(id, sku);
        }
        if (scrollPosition.top > 0) {
          setTimeout(() => {
            scrollTo(scrollPosition.top);
          }, 100);
        }
      }
    }
  },
  { immediate: true, deep: true }
);

// 跳转页面指定高度
const scrollTo = (height) => {
  const findIndex = tabs.value.findIndex((i) => i.value == activeName.value);
  if (findIndex == -1) return;
  const container = document.querySelector(`#scrollContainer${findIndex}`);
  container.scrollTo({
    top: height,
    behavior: "auto",
  });
};

// 图片下载
const handleDownload = (item) => {
  downLoadImage(item.image_link, item.image_name);
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin-bottom: 4px;
}
</style>
